<template>
  <div>
    <div class="gender">用户性别占比</div>
  </div>
  <div ref="chartContainer" style="width: 200px; height:250px;"></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";

export default {
  name: "Pie3DChart",
  data() {
    return {
      optionsData: [],
    };
  },
  methods: {
    // 以下是提取出的函数，接收对应数据作为参数
    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h, pieData) {
      let midRatio = (startRatio + endRatio) / 2;
      let startRadian = startRatio * Math.PI * 2;
      let endRadian = endRatio * Math.PI * 2;
      let midRadian = midRatio * Math.PI * 2;
      isSelected = false;
      k = typeof k !== "undefined" ? k : 1 / 3;
      let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
      let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;
      let hoverRate = isHovered ? 1.05 : 1;

      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32,
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20,
        },
        x: function (u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return (
              offsetX +
              Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
        },
        y: function (u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          if (u > endRadian) {
            return (
              offsetY +
              Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            );
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
        },
        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u);
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * pieData.value * 0.1;
          }
          return Math.sin(v) > 0 ? 1 * pieData.value * 0.1 : -1;
        },
      };
    },
    getPie3D(pieData, internalDiameterRatio) {
      let series = [];
      let sumValue = 0;
      let startValue = 0;
      let endValue = 0;
      let legendData = [];
      let k =
        typeof internalDiameterRatio !== "undefined"
          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
          : 1 / 3;

      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value;

        let seriesItem = {
          name:
            typeof pieData[i].name === "undefined"
              ? `series${i}`
              : pieData[i].name,
          type: "surface",
          parametric: true,
          wireframe: {
            show: false,
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: 1 / 10,
          },
        };

        if (typeof pieData[i].itemStyle != "undefined") {
          let itemStyle = {};
          if (typeof pieData[i].itemStyle.color != "undefined") {
            itemStyle.color = pieData[i].itemStyle.color;
          }
          if (typeof pieData[i].itemStyle.opacity != "undefined") {
            itemStyle.opacity = pieData[i].itemStyle.opacity;
          }
          seriesItem.itemStyle = itemStyle;
        }
        series.push(seriesItem);
      }

      for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value;

        series[i].pieData.startRatio = startValue / sumValue;
        series[i].pieData.endRatio = endValue / sumValue;
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value,
          series[i].pieData
        );

        startValue = endValue;

        legendData.push(series[i].name);
      }

      return series;
    },
  },
  mounted() {
    const _this = this;
    this.$axios.post('/api/survey/nameGender')
      .then(function (response) {
        _this.optionsData = response.data.data;
        const series = _this.getPie3D(_this.optionsData, 0.6);
        series.push({
          name: "pie2d",
          type: "pie",
          label: {
            opacity: 1,
            fontSize: 14,
            lineHeight: 20,
            textStyle: {
              fontSize: 14,
              color: "#fff",
            },
          },
          labelLine: {
            length: 10,
            length2: 10,
          },
          startAngle: 2,
          clockwise: false,
          radius: ["50%", "60%"],
          center: ["62%", "50%"],
          data: _this.optionsData,
          itemStyle: {
            opacity: 0,
          },
          labelLine: {
            show: false,
          },
          label: {
            show: false,
            position: "center",
          },
        });

        const option = {
          legend: {
            show: true,
            tooltip: {
              show: true,
            },
            icon: "circle",
            orient: "vertical",
            data: ["男", "女"],
            top: "0",
            itemGap: 10,
            itemHeight: 14,
            itemWidth: 24,
            right: "4%",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              rich: {
                name: {
                  width: 10,
                  fontSize: 15,
                  color: "#B0D8DF",
                  fontFamily: "Source Han Sans CN",
                },
                value: {
                  width: 20,
                  fontSize: 15,
                  padding: [0, 5, 0, 10],
                  color: "#fff",
                  fontFamily: "Source Han Sans CN",
                },
                A: {
                  fontSize: 15,
                  color: "#B0D8DF",
                  fontFamily: "Source Han Sans CN",
                },
                rate: {
                  width: 15,
                  fontSize: 15,
                  padding: [0, 5, 0, 10],
                  color: "#fff",
                  fontFamily: "Source Han Sans CN",
                },
                B: {
                  fontSize: 15,
                  color: "#fff",
                  padding: [0, 5, 0, 10],
                  fontFamily: "Source Han Sans CN",
                },
              },
            },
            formatter: function (name) {
              let total = 0;
              let target;
              for (let i = 0; i < _this.optionsData.length; i++) {
                total += _this.optionsData[i].value;
                if (_this.optionsData[i].name === name) {
                  target = _this.optionsData[i].value;
                }
              }
              let arr = [
                "{name|" + name + "}",
                "{value|" + target + "}{A|人}",
                "{rate|" + ((target / total) * 100).toFixed(0) + "}{B|%}",
              ];
              return arr.join("  ");
            },
          },
          animation: true,
          tooltip: {
            backgroundColor: "rgba(64, 180, 176, 0.6)",
            borderColor: "rgba(64, 180, 176, 0.6)",
            textStyle: {
              color: "#fff",
              fontSize: 24,
            },
            formatter: (params) => {
              if (
                params.seriesName !== "mouseoutSeries" &&
                params.seriesName !== "pie2d"
              ) {
                return `${params.seriesName
                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
                  };"></span>${_this.optionsData[params.seriesIndex].value + "人"
                  }`;
              }
            },
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: "#7BC0CB",
            },
            normal: {
              show: true,
              length: 10,
              length2: 10,
            },
          },
          label: {
            show: true,
            position: "outside",
            formatter: "{b} \n{c}\n{d}%",
            textStyle: {
              color: "rgba(176, 216, 223, 1)",
              fontSize: 24,
            },
          },
          xAxis3D: {
            min: -1,
            max: 1,
          },
          yAxis3D: {
            min: -1,
            max: 1,
          },
          zAxis3D: {
            min: -1,
            max: 1,
          },
          grid3D: {
            show: false,
            boxHeight: 1,
            left: "6%",
            top: -10,
            width: "100%",
            viewControl: {
              distance: 280,
              alpha: 40,
              beta: 15,
              autoRotate: false, // 自动旋转
              rotateSensitivity: 1,
              zoomSensitivity: 0,
              panSensitivity: 0,
            },
          },
          series: series,
        };

        const chart = echarts.init(_this.$refs.chartContainer);
        chart.setOption(option);
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};
</script>

<style scoped>
.gender {
  margin-left: 20px;
  margin-bottom: 40px;
  width: 140px;
  height: 27px;
  background-image: url('../../../public/imgs/dsadssda.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 15px;
  text-align: left;
  line-height: 27px;
  padding-left: 10px;
}
</style>